<!DOCTYPE html>
<html>
<head>
	<title>Websanova Paint</title>
	
	<!-- jQuery -->
	<script type="text/javascript" src="./inc/jquery.1.7.1.min.js"></script>
	<script type="text/javascript" src="./inc/jquery.ui.core.min.js"></script>
	<script type="text/javascript" src="./inc/jquery.ui.widget.min.js"></script>
	<script type="text/javascript" src="./inc/jquery.ui.mouse.min.js"></script>
	<script type="text/javascript" src="./inc/jquery.ui.draggable.min.js"></script>
	
	<!-- wColorPicker -->
	<link rel="Stylesheet" type="text/css" href="./inc/wColorPicker.1.2.min.css" />
	<script type="text/javascript" src="./inc/wColorPicker.1.2.min.js"></script>
	
	<!-- wPaint -->
	<link rel="Stylesheet" type="text/css" href="./wPaint.css" />
	<script type="text/javascript" src="./wPaint.js"></script>
	
</head>
<body>
	
	<div id="wPaint" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
	<div>
		<a href="javascript:loadImage();">load image</a> |
		<a href="javascript:saveImage();">save image</a>
	</div><br/>
	
	image data: <input id="canvasImageData" type="text" />
	down: <input id="canvasDown" type="text" />
	move: <input id="canvasMove" type="text" />
	up: <input id="canvasUp" type="text" />

	<br/><br/>

	<img id="canvasImage" src=""/>
	
	<script type="text/javascript">
		$("#wPaint").wPaint({
			image: "",
			drawDown: function(e, element){ $("#canvasDown").val(element.settings.mode +": " + e.pageX + ',' + e.pageY); },
			drawMove: function(e, element){ $("#canvasMove").val(element.settings.mode +": " + e.pageX + ',' + e.pageY); },
			drawUp: function(e, element){ $("#canvasUp").val(element.settings.mode +": " + e.pageX + ',' + e.pageY); }
		});
		
		function loadImage()
		{
			$("#wPaint").wPaint("image", "");
		}
		
		function saveImage()
		{
			var imageData = $("#wPaint").wPaint("image");
			
			$("#canvasImage").attr('src', imageData);
			$("#canvasImageData").val(imageData);
		}
		
	</script>
</body>
</html>